<template>
  <div class="navbar">
    <div class="logo">
      <img :src="logo" alt="logo" />
      <van-button type="danger" round class="open-app">打开App</van-button>
    </div>

    <div class="search">
      <van-icon name="list-switch" class="list-switch" size="30" @click="gotoCategory" />
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        class="search-input"
        @click="gotoSearch"
      />
      <van-icon name="chat-o" size="30" class="wechat" />
    </div>
  </div>
</template>

<script setup>
import logo from '@/assets/logo.png'
import { useRouter } from 'vue-router'
const router = useRouter()

//进入分类页面
const gotoCategory = () => {
  router.push({ name: 'category' })
}

// 进入搜索页面
const gotoSearch = () => {
  router.push({ name: 'search' })
}
</script>

<style lang="scss" scoped>
.navbar {
  width: 100%;
  height: 100%;

  background-color: #fff;
  box-sizing: border-box;

  .logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    overflow: hidden;
    background-color: #fff;
    padding: 0 10px;

    img {
      // margin-left: 10px
      height: 100%;
    }

    .open-app {
      height: 28px;
      background-color: #f46;
      border: none;
    }
  }

  .search {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
    padding: 0 10px;
    border-top: 1px solid #eee;

    .search-input {
      width: 100%;
    }

    .wechat {
      margin-left: auto;
    }
  }
}
</style>
